<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格 - 编辑</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
    <script src="//cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js" charset="utf-8"></script>
</head>

<body>
<div style="padding: 15px;margin: 15px;background-color: #fff;">
    <!-- 表单 -->
    <form class="layui-form" action="">
        {:token_field()}
        <input type="hidden" name="id" value="{$row['id']}">
        <div class="layui-form-item">
            <label class="layui-form-label">键</label>
            <div class="layui-input-block">
                <input type="text" name="meta_key" value="{$row['meta_key']}" required lay-verify="required"
                    placeholder="请输入键" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">值</label>
            <div class="layui-input-block">
                <input type="text" name="meta_value" value="{$row['meta_value']}" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="hidden" name="status" value="1">
                <input type="checkbox" name="status" value="0" {$row['status']==0 ? 'checked' :''} lay-text="开启|禁用"
                    lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="save_edit" lay-filter="submit">保存</button> <!-- lay-submit -->
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>

<!-- js -->
<script>
    layui.use(['form', 'upload', 'layedit', 'laydate', 'colorpicker', 'tree'], function () {
        var form = layui.form
            , upload = layui.upload
            , layedit = layui.layedit
            , laydate = layui.laydate
            , colorpicker = layui.colorpicker
            , tree = layui.tree
            , $ = layui.jquery;

        //获取应用、控制器和方法
        var module = '{:app("http")->getName()}'
            , controller = '{$Request.controller}'
            , action = '{$Request.action}';

        // 日期
        $('form .date').each(function () {
            laydate.render({
                elem: 'input[name="' + $(this).attr('name') + '"]',
                type: $(this).data('type') || 'date'
            });
        });

        // 颜色
        $('form .color').each(function () {
            var input_id = $(this).attr('name');
            $(this).parent().parent().append('<div class="layui-inline" style="left: -11px;"><div id="' + input_id + '-render"></div></div>');
            colorpicker.render({
                elem: '#' + input_id + '-render',
                done: function (color) {
                    $('input[name="' + input_id + '"]').val(color);
                }
            });
        });

        // 上传
        $('form .upload').each(function () {
            var input_id = $(this).attr('name');
            $(this).parent().append('<div class="layui-upload-list" style="position:relative;"></div>');
            $(this).parent().parent().append('<button type="button" class="layui-btn layui-btn-primary" id="' + input_id + '-render"><i class="layui-icon layui-icon-upload"></i> 上传</button>');
            if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test($(this).val())) {
                $(this).parent().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + $(this).val() + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
            }
            upload.render({
                elem: '#' + input_id + '-render',
                url: '/' + module + '/files/upload',
                data: {},
                before: function (obj) {
                    layer.load();
                },
                done: function (res, index, upload) {
                    layer.closeAll('loading');
                    if (res.code > 0) return layer.msg('上传失败');
                    //上传成功
                    $(this.item).prev().find('input[name="' + input_id + '"]').val(res.data.src)
                    if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test(res.data.src)) {
                        $(this.item).prev().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + res.data.src + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
                    }
                },
                error: function (index, upload) {
                    layer.closeAll('loading');
                }
            });
        });
        $('form .upload').change(function () {
            if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test($(this).val())) {
                $(this).parent().find('.layui-upload-list').html('<i class="layui-icon layui-icon-close-fill" style="position:absolute;bottom:-10px;left:-10px;opacity:0.8;cursor:pointer;"></i><img src="' + $(this).val() + '" alt="Preview" style="max-width:92px" onerror="this.parentNode.innerHTML=\'404 Error\'" />');
            } else {
                $(this).parent().find('.layui-upload-list').html(null);
            }
        });
        $('form .layui-upload-list').on('click', '.layui-icon-close-fill', function () {
            $(this).parent().prev().val(null);
            $(this).parent().html(null);
        });

        // layedit富文本
        var editors = [];
        layedit.set({
            uploadImage: {
                url: '/' + module + '/file/upload', //接口url
                type: 'post', //默认post
            }
        });
        $('form .editor').each(function () {
            var editor_id = $(this).attr('name');
            $(this).attr('id', editor_id);
            $(this).attr('lay-verify', editor_id);
            editors[editor_id] = layedit.build(editor_id, {
                tool: [
                    'strong', //加粗
                    'italic', //斜体
                    'underline', //下划线
                    'del', //删除线
                    '|', //分割线
                    'left', //左对齐
                    'center', //居中对齐
                    'right', //右对齐
                    '|', //分割线
                    'link', //超链接
                    'unlink', //清除链接
                    'image', //插入图片
                ]
            });
        });

        // wangeditor富文本
        var weditors = [];
        window.wangEditor && $('form .weditor').each(function () {
            var weditor = window.wangEditor;
            var editor_id = $(this).attr('name');
            $(this).attr('id', editor_id).addClass('layui-hide');
            $(this).parent().prepend('<div id="' + editor_id + '"></div>');
            weditors[editor_id] = new weditor(document.getElementById(editor_id));
            weditors[editor_id].config.uploadImgServer = '/' + module + '/files/wangeditor_upload'; //接口url
            weditors[editor_id].config.onchange = function (html) {
                $('#' + editor_id).parent().find('textarea[name="' + editor_id + '"]').val(html)
            }
            weditors[editor_id].create();
            weditors[editor_id].txt.html($('#' + editor_id).parent().find('textarea[name="' + editor_id + '"]').val())
        });

        // 监听提交（保存编辑）
        form.on('submit(submit)', function (data) {
            for (var editor in editors) {
                data.field[editor] = layedit.getContent(editors[editor]);
            }
            $.post('/' + module + '/' + controller + '/'+ (data.elem.getAttribute('lay-submit') || 'save_edit'), data.field, function (res) {
                if (res.code) return layer.alert(res.msg, { icon: 2 });
                layer.alert(res.msg, { icon: 1 });
                setTimeout(function () {
                    var current = window, parentIndex = parent.layer.getFrameIndex(window.name);
                    if (typeof parentIndex !== 'undefined') {
                        parent.layer.close(parentIndex);
                        current = parent.window;
                    }
                    if (typeof res.url !== 'undefined' && res.url) {
                        current.location.href = res.url;
                    } else {
                        if (typeof current.layui.table !== 'undefined' && current.layui.table.index == 1 && typeof current.layui.laypage === 'undefined') {
                            current.layui.table.reload('dataTable');
                        } else {
                            current.location.reload();
                        }
                    }
                }, 1000);
            }, 'json');
            return false;
        });

    });
</script>

</body>

</html>